<template>
  <v-card id="personal-card">
    <v-list three-line>
      <template v-for="(item, index) in items">
        <v-divider v-if="index" :key="'dv_' + index" :inset="true"></v-divider>
        <v-list-item :key="'li_' + index">
          <v-list-item-content>
            <v-list-item-title>
              <v-card class="paperCard">
                <div class="title" @click="golink(item.paper)">
                 <a>
                   <vue-mathjax :formula="item.paper_info.title" :safe="false"></vue-mathjax>
                 </a>
                </div>

                <div class="line0">
                  <span>浏览时间: {{item.skim_time}}</span>
                  <span >
                  <span>作者:</span>
                  <span
                    v-for="(author, index) in item.paper_info.authors"
                    :key="index"
                    class="author">
                    {{ author.name }},
                    </span>
                  </span>
                </div>
                <v-divider></v-divider>
              </v-card>
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </template>
    </v-list>
  </v-card>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      items: [],
    };
  },
  methods: {
    golink(paper_id) {
      this.$router.push("/paperdetail/" + paper_id);
    },
  },
  mounted() {
    this.$api.personal
      .getHistory()
      .then((data) => (this.items = data))
      .catch((error) =>
        this.$dialog.error({
          text: error,
          title: "API error",
        })
      );
  },
};
</script>

<style scoped>
.title {
  font-size: 20px!important;
  color: #000000;
  margin-left: 2%;
  padding-top: 2%;
  margin-right: 2%;
}
.line0 {
  margin: 1% 2% 2%;
  display: flex;
  justify-content: space-between;
}
.author {
  color: red;
  font-size: 14px;
  margin-right: 20px;
  margin-bottom: 10px;
}

.paperCard {
  /*width: 60%;*/
  margin: 0 auto;
}
</style>